﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui</title>
    <link href="../../../css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css"></style>
</head>
<body>
    <div class="H-margin-horizontal-both-10 H-theme-border-color-eee H-border-radius-5 H-overflow-hidden H-margin-vertical-top-10">
        <div class="H-accordion-area">
            <div class="H-accordion-title H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-after H-vertical-middle H-touch-active">
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">列表名称</div>
                <span class="H-icon H-padding-horizontal-right-8 H-display-block"><i class="H-accordion-icon H-iconfont H-icon-arrow-down H-theme-font-color-ccc H-font-size-14 H-vertical-middle"></i></span>
            </div>
            <div class="H-accordion-main H-padding-vertical-top-10 H-theme-background-color-white H-border-vertical-bottom-after H-display-none-important">
                <div class="H-clear-both H-width-100-percent H-display-table H-box-sizing-border-box H-padding-horizontal-left-10">
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="H-accordion-area">
            <div class="H-accordion-title H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-after H-vertical-middle H-touch-active">
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">列表名称</div>
                <span class="H-icon H-padding-horizontal-right-8 H-display-block"><i class="H-accordion-icon H-iconfont H-icon-arrow-down H-theme-font-color-ccc H-font-size-14 H-vertical-middle"></i></span>
            </div>
            <div class="H-accordion-main H-padding-vertical-top-10 H-theme-background-color-white H-border-vertical-bottom-after H-display-none-important">
                <div class="H-flexbox-horizontal H-text-align-center H-theme-background-color-white H-padding-vertical-both-10">
                    <div class="H-flex-item">
                        <span class="H-icon H-center-all H-theme-background-color1 H-border-radius-15 H-margin-horizontal-auto" style="height: 42px; width: 42px; "><i class="H-iconfont H-icon-qq H-font-size-22 H-theme-font-color-white"></i></span>
                        <label class="H-display-block H-font-size-13 H-margin-vertical-top-5">菜单名</label>
                    </div>
                    <div class="H-flex-item">
                        <span class="H-icon H-center-all H-theme-background-color2 H-border-radius-15 H-margin-horizontal-auto" style="height: 42px; width: 42px; "><i class="H-iconfont H-icon-weixin H-font-size-22 H-theme-font-color-white"></i></span>
                        <label class="H-display-block H-font-size-13 H-margin-vertical-top-5">菜单名</label>
                    </div>
                    <div class="H-flex-item">
                        <span class="H-icon H-center-all H-theme-background-color3 H-border-radius-15 H-margin-horizontal-auto" style="height: 42px; width: 42px; "><i class="H-iconfont H-icon-weibo H-font-size-22 H-theme-font-color-white"></i></span>
                        <label class="H-display-block H-font-size-13 H-margin-vertical-top-5">菜单名</label>
                    </div>
                    <div class="H-flex-item">
                        <span class="H-icon H-center-all H-theme-background-color4 H-border-radius-15 H-margin-horizontal-auto" style="height: 42px; width: 42px; "><i class="H-iconfont H-icon-qzone H-font-size-22 H-theme-font-color-white"></i></span>
                        <label class="H-display-block H-font-size-13 H-margin-vertical-top-5">菜单名</label>
                    </div>
                    <div class="H-flex-item">
                        <span class="H-icon H-center-all H-theme-background-color5 H-border-radius-15 H-margin-horizontal-auto" style="height: 42px; width: 42px; "><i class="H-iconfont H-icon-friends H-font-size-22 H-theme-font-color-white"></i></span>
                        <label class="H-display-block H-font-size-13 H-margin-vertical-top-5">菜单名</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="H-accordion-area">
            <div class="H-accordion-title H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">列表名称</div>
                <span class="H-icon H-padding-horizontal-right-8 H-display-block"><i class="H-accordion-icon H-iconfont H-icon-arrow-down H-theme-font-color-ccc H-font-size-14 H-vertical-middle"></i></span>
            </div>
            <div class="H-accordion-main H-padding-vertical-top-10 H-theme-background-color-white H-border-vertical-bottom-after H-display-none-important">
                <div class="H-clear-both H-width-100-percent H-display-table H-box-sizing-border-box H-padding-horizontal-left-10">
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                    <div class="H-display-table-cell H-float-left  H-box-sizing-border-box H-width-avg-3 H-padding-horizontal-right-10 H-margin-vertical-bottom-10">
                        <img src="../../../image/logo.png" class="H-width-100-percent H-display-block" alt="" title="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../../script/H.js" type="text/javascript"></script>
    <script type="text/javascript">
        H.on(H.Ds(".H-accordion-title"), "touchend", function (event) {
            var area = H.getParents(event.target, "H-accordion-area");
            var title = H.D(".H-accordion-title", area);
            var main = H.D(".H-accordion-main", area);
            var icon = H.D(".H-accordion-icon", area);
            if (H.isElement(main)) {
                if (H.hasClass(main, "H-display-none-important")) {

                    H.removeClass(icon, "H-icon-arrow-down");
                    H.addClass(icon, "H-icon-arrow-up");

                    H.removeClass(title, "H-theme-background-color-white");
                    H.addClass(title, "H-theme-background-color-f4f4f4");

                    H.removeClass(main, "H-display-none-important");
                }
                else {
                    H.removeClass(icon, "H-icon-arrow-up");
                    H.addClass(icon, "H-icon-arrow-down");

                    H.removeClass(title, "H-theme-background-color-f4f4f4");
                    H.addClass(title, "H-theme-background-color-white");

                    H.addClass(main, "H-display-none-important");
                }
            }
        });
    </script>
</body>
</html>